<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示或隐藏输入框</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.clearfix::after {
				content: '';
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			.clearfix {
				*zoom:1;
			}
			.box {
				width: 300px;
				margin: 50px auto;
				/*background-color: pink;*/
				background-color: dodgerblue;
				font-size: 0;
				border: 1px solid #ccc;
			}
			
			.box input {
				float: left;
				width: 200px;
				height: 28px;
				line-height: 30px;
				color:#999;
				padding-left: 10px;
				border: 0;
				outline: none;
			}
			.box button {
				float: left;
				width: 98px;
				height: 28px;
				border: 0;
				outline: none;
				cursor: pointer;
				background-color: dodgerblue;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<input type="text" name="" id="" value="手机" />
			<button>搜索</button>
		</div>
		<script type="text/javascript">
			//获取元素对象
			var input = document.querySelector('input');
			input.onfocus  = function() {
				//判断里面的内容是否是手机
				if(input.value === '手机') {
					//是手机，将里面的内容清空
					this.value = ''
					//将字体颜色加深
					this.style.color = '#000'
				}
			}
			input.onblur = function() {
				if(this.value === ''){
					//内容为空,设置内容为手机
					this.value = '手机';
					//设置字体颜色为 #ccc
					this.style.color = '#ccc'
				}else {
					//不为空
					this.style.color = '#000'
				}
			}
		</script>
	</body>
</html>
